<template>
    <div>
        <h2>当前温度{{state.temp}}建议穿衣{{ suggest }}</h2>
        <button @click="() => state.temp -=5">-5</button>
        <button @click="() => state.temp +=5">+5</button>

    </div>
</template>

<script setup>
import { reactive,computed,watch} from 'vue'
const state = reactive({
    temp:9
})
const suggest = computed(() => { //内部依赖的变量发生变更，计算属性才会重新执行

    if(state.temp < 10) return '穿棉袄'
    else if (state.temp < 20) return '穿外套'
    else return '穿短袖'
})

watch(
    () => state.temp,
    (newVal,oldval) => {
        console.log('温度变化了', newVal)
    }
)
</script>

<style lang="scss" scoped>

</style>